<template>
  <div class="article-list-container">
    <van-pull-refresh
      v-model="loading"
      @refresh="handleRefresh"
      >
      <van-list
        v-model="loading"
        :finished="finished"
        :immediate-check="false"
        finished-text="没有更多数据啦!"
        offset="50"
        @load="handleLoad"
        >
        <article-item
          v-for="obj in artileList"
          :key="obj.art_id"
          :item="obj"
          @dislike="handleDislike"
          />
      </van-list>
    </van-pull-refresh>

  </div>
</template>

<script>

import { getArticleListAPI } from '@/api/home'
export default {
  name: 'ArticleList',
  props: {
    channel: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      // 用户分页的时间戳，默认值是当前时间戳
      timestamp: Date.now(),
      // 文章列表
      artileList: [],
      // 控制每一页的加载状态
      loading: false,
      // 控制整个列表的加载状态
      finished: false
    }
  },
  created () {
    this.getArticleList()
  },
  methods: {
    // 获取文章列表
    async getArticleList (isPullUp) {
      // 调接口发请求
      const resp = await getArticleListAPI(
        this.channel.id,
        this.timestamp
      )
      // 解构resp
      const { results, pre_timestamp: timestamp } = resp.data
      // 如果后台返回的results长度为零或者pre_pre_timestamp的值为null，说明无更多数据了
      if (!results.length || !timestamp) {
        // 整个列表加载结束
        this.finished = true
        return
      }
      // 保存文章列表
      // 第1次：空数组和results合并，合并完之后还是results的值
      // 第2-n次：拿到之前的articlieList和results合并
      if (isPullUp) { // 上拉
        // 上拉旧新数组合并
        this.artileList = [...this.artileList, ...results]
      } else { // 下拉
        // 下拉新旧数组合并
        this.artileList = [...results, ...this.artileList]
      }
      // 保存用于分页的时间戳
      this.timestamp = timestamp
      // 更新loading状态为false
      this.loading = false
    },
    // 上拉加载
    handleLoad () {
      // 传入true表示上拉
      this.getArticleList(true)
    },
    // 下拉刷新
    handleRefresh () {
      // 传入false表示下拉
      this.getArticleList(false)
    },
    // 不感兴趣
    handleDislike (articleId) {
      // 通过 articleId 去数组中查找对应的 id 文章
      const i = this.artileList.findIndex(item => item.art_id === articleId)
      // 如果i不是-1，说明找到了
      if (i !== -1) {
        // 则调用数组的splice删除
        this.artileList.splice(i, 1)
        // 如果数组长度小于10，不够删了
        if (this.artileList.length <= 10) {
          // 获取下一页数据补在后面（防止出现空白区域)
          this.getArticleList(true)
        }
      }
    }
  }
}
</script>

<style scoped lang="less">
.article-list-container {
  // calc(): CSS3用于计算尺寸的函数
  height: calc(100vh - 140px);
  // y轴溢出内容可滚动
  overflow-y: scroll;
}
</style>
